<template>
  <a-card title="代办提醒" :bordered="false" class="mb-8">
    <div class="wrap">
      <div
        v-for="(item, index) in dataList.list"
        :key="item.name"
        :hoverable="true"
        class="wrap_item"
        :style="{ width: '30%' }">
        <div class="wrap_content">
          <div class="start">
            <span class="circle"></span>
            <span class="name">{{item.name}}</span>
          </div>
          <div class="end">
            <span>{{item.path}}</span>
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { navigationItem } from '@/mock/home-data';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useMenuStore } from '@/store';

const router = useRouter();
const appStore = useMenuStore();

const dataList = reactive({
  list: navigationItem,
});

const navigater = (item: any) => {
  router.push(item.path);
  appStore.addTagIten(item);
};
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  align-items: center;
  .wrap_content {
    display: flex;
    align-items: center;
    padding: 20px;
    margin-right: 20px;
    .start {
      display: flex;
      align-items: center;
      height: 50px;
      border: 1px solid gray;
      border-radius: 10px 0px 0px 10px;
      .circle {
        width: 10px;
        height: 10px;
        background-color: #8abe77;
        border-radius: 50%;
        margin-right: 10px;
        margin-left: 10px;
      }
      .name {
        padding-right: 20px;
      }
    }
    .end {
      display: flex;
      align-items: center;
      height: 50px;
      border-top: 1px solid gray;
      border-right: 1px solid gray;
      border-bottom: 1px solid gray;
      border-radius: 0px 10px 10px 0px;
      span {
        margin-right: 10px;
        margin-left: 10px;
        font-weight: 800;
      }
    }
  }
}
</style>